<template>
	<a-modal title="消息通知" v-model:visible="visible" @ok="onSubmit" :width="650" @cancel="onClose">
		<a-form ref="formRef" layout="vertical" :model="formData" :rules="formRules">
			<a-form-item label="请选择通知范围" name="noticeRange">
				<a-radio-group v-model:value="formData.noticeRange" button-style="solid" @change="getSourceData">
					<a-radio-button value="org">机构</a-radio-button>
					<a-radio-button value="user">人员</a-radio-button>
					<a-radio-button value="group">社团</a-radio-button>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="请选择通知类型" name="noticeType">
				<a-radio-group v-model:value="formData.noticeType" button-style="solid">
					<a-radio-button value="wechat">企业微信</a-radio-button>
					<a-radio-button value="email">邮件</a-radio-button>
					<a-radio-button value="sms">短信</a-radio-button>
					<a-radio-button value="inter">站内信</a-radio-button>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="请输入通知内容" name="noticeContent">
				<a-textarea v-model:value="formData.noticeContent" />
			</a-form-item>
			<a-form-item label="请选择通知对象">
				<a-transfer
					:data-source="sourceData"
					show-search
					:list-style="{
						width: '250px',
						height: '300px'
					}"
					:operations="['添加', '取消']"
					:target-keys="targetKeys"
					:render="(item) => `${item.title}`"
					@change="handleChange"
					@search="handleSearch"
				>
					<template #notFoundContent>
						<span>无数据</span>
					</template>
				</a-transfer>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup name="bizCongressNoticeForm">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import bizNoticeApi from '@/api/biz/bizNoticeApi'

	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	// 表单数据
	const formData = ref({
		noticeRange: 'org',
		noticeType: 'wechat',
		noticeContent: '',
		noticeKeys: []
	})
	const formRef = ref()
	const submitLoading = ref(false)

	const formRules = {
		noticeRange: [required('请选择通知范围')],
		noticeType: [required('请选择通知类型')],
		noticeContent: [required('请输入通知类型')]
	}

	// 穿梭树源对象
	const sourceData = ref([])
	const targetKeys = ref([])

	// 打开通知选择模态框
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}
	}

	// 处理选中的通知列表
	const handleChange = (keys, direction, moveKeys) => {
		targetKeys.value = keys
		console.log(targetKeys.value)
	}

	// 搜索功能
	const handleSearch = (dir, value) => {
		// console.log('search:', dir, value)
		/*// 执行查询参数（left 请求， right 过滤）
		if (direction === 'left') {
			const data = {
				noticeRange: formData.value.noticeRange,
				searchName: value
			}
			bizNoticeApi.bizNoticeList(data).then((res) => {
				sourceData.value = res
			})
		}*/
	}

	// 关闭通知选择模态框
	const onClose = () => {
		sourceData.value = []
		targetKeys.value = []
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
	}

	// 获取列表数据
	const getSourceData = () => {
		bizNoticeApi.bizNoticeList({ noticeRange: formData.value.noticeRange }).then((res) => {
			sourceData.value = res
		})
	}

	// 验证并提交数据
	const onSubmit = () => {
		formData.value.noticeKeys = targetKeys.value
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				const formDataParam = cloneDeep(formData.value)
				bizNoticeApi.bizNotice(formDataParam).then((res) => {
					console.log(res)
				})
			})
			.catch(() => {})
	}

	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
